<template>
	<view style="height: 90vh;">
		<!-- 三个子页面 -->
		<Home v-if="current == 0"></Home>
		<Classify v-if="current == 1"></Classify>
		<My v-if="current == 2"></My>
		<!-- 底部tab样式 -->
		<view class="tab">
			<!-- 循环 tabbar里面的数据 -->
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tab_tiem" :class="[current == index ? 'active': '']" :data-index="index" @tap="tabSwitch">
					<view class="item_img">
						<image class="image" :src="current != index ? item.img :item.slectImg " mode=""></image>
					</view>
					<view class="item_name">
						{{item.text}}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import Home from '@/components/home'
	import Classify from '@/components/classify'
	import My from '@/pages/index/index'
	export default {
		data() {
			return {
				current: 0,
				tabbar: [{
						img: '../../static/tab/home.png', //未选中
						slectImg: '../../static/tab/home_select.png', //已选中
						text: 'tab-首页',
					},
					{
						img: '../../static/tab/classify.png',
						slectImg: '../../static/tab/classify_select.png',
						text: '分类',
					},
					{
						img: '../../static/tab/my.png',
						slectImg: '../../static/tab/my_select.png',
						text: '我的-首页',
					}
				],
			}
		},
		methods: {
			tabSwitch(e) {
				console.log(e);
				let index = e.currentTarget.dataset.index
				this.current = index
			}
		},
		components: {
			Home,
			Classify,
			My
		}
	}
</script>

<style lang="scss">
	.tab {
		width: 100%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 1024;
		background-color: #FFFFFF;
		height: 100rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1rpx solid #888888;

		.tab_tiem {
			flex: 1;
			width: 25%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			font-size: 24rpx;
			color: #666;
			height: 80rpx;
		}

		.item_img {
			padding-top: 4rpx;
		}

		.image {
			height: 30rpx;
			width: 30rpx;
		}

		.tab::before {
			color: red;
		}

		.item_name {
			font-weight: bold;
			transform: scale(0.8);
			transform-origin: center 100%;
			line-height: 30rpx;
		}

		.active {
			// color: var(--color) !important;
			color: red;
		}
	}
</style>
